<template>
  <div class="main-box">
    <BaseTitle :title="$t('友链详情')">
      <template #right>
        <BackBtn />
      </template>
    </BaseTitle>
    <el-row>
      <el-col :span="12" class="left">
        <div class="item">
          <label>{{ $t('链接名称') }}</label>
          <span>{{ linkData.name }}</span>
        </div>
        <div class="item">
          <label>{{ $t('链接地址') }}</label>
          <span>{{ linkData.url }}</span>
        </div>
        <div class="item">
          <label>{{ $t('链接位置') }}</label>
          <span>{{ linkData.position }}</span>
        </div>
        <div class="item">
          <label>{{ $t('排序') }}</label>
          <span>{{ linkData.sort }}</span>
        </div>
        <div class="item">
          <label>{{ $t('打开方式') }}</label>
          <span v-if="linkData.target == 1">{{ $t('本页面打开') }}</span>
          <span v-else-if="linkData.target == 2">{{ $t('新页面打开') }}</span>
        </div>
        <div class="item">
          <label>{{ $t('导出链接') }}</label>
          <span>{{ linkData.export_link }}</span>
        </div>
        <div class="item">
          <label>{{ $t('检查记录') }}</label>
          <span v-if="linkData.check_log == 1">{{ $t('存在') }}</span>
          <span v-else-if="linkData.check_log == 2">{{ $t('不存在') }}</span>
        </div>
        <div class="item">
          <label>{{ $t('添加时间') }}</label>
          <span>{{ linkData.add_time }}</span>
        </div>
      </el-col>

      <el-col :span="12" class="right">
        <div class="item">
          <label>{{ $t('链接类型') }}</label>
          <span v-if="linkData.url_type == 1">{{ $t('友情交换') }}</span>
          <span v-if="linkData.url_type == 2">{{ $t('链接出售') }}</span>
          <span v-if="linkData.url_type == 3">{{ $t('链接购买') }}</span>
          <span v-if="linkData.url_type == 4">{{ $t('版权链接') }}</span>
        </div>
        <div class="item">
          <label>{{ $t('网站类型') }}</label>
          <span v-if="linkData.site_type == 1">{{ $t('企业站') }}</span>
          <span v-else-if="linkData.site_type == 2">{{ $t('新闻站') }}</span>
          <span v-else-if="linkData.site_type == 3">{{ $t('博客站') }}</span>
          <span v-else-if="linkData.site_type == 4">{{ $t('论坛站') }}</span>
          <span v-else-if="linkData.site_type == 5">{{ $t('门户站') }}</span>
        </div>
        <div class="item">
          <label>{{ $t('添加人') }}</label>
          <span>{{ linkData.add_person }}</span>
        </div>
        <div class="item">
          <label>{{ $t('联系电话') }}</label>
          <span>{{ linkData.mobile }}</span>
        </div>
        <div class="item">
          <label>{{ $t('交换平台') }}</label>
          <span>{{ linkData.exchange_platform }}</span>
        </div>
        <div class="item">
          <label>{{ $t('百度权重') }}</label>
          <span>{{ linkData.baidu_weight }}</span>
        </div>
        <div class="item">
          <label>{{ $t('截止时间') }}</label>
          <span>{{ linkData.end_time }}</span>
        </div>
        <div class="item">
          <label>{{ $t('PR值') }}</label>
          <span>{{ linkData.pr_value }}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import linkApi from '@/api/link'
export default {
  data() {
    return {
      id: '',
      linkData: {}
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getInfo()
  },
  methods: {
    getInfo() {
      const val = {
        id: this.$route.query.id,
        website_id: this.$route.query.siteId,
        type: this.$route.query.type
      }
      linkApi.linkInfo(val).then(res => {
        if (res.code == 0) {
          this.linkData = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main-box {
  .item {
    border-bottom: solid 1px #e1e4ea;
    border-left: solid 1px #eee;
    height: 45px;
    line-height: 44px;
    font-size: 14px;
    color: #444;
    label {
      text-align: center;
      border-right: solid 1px #eee;
      // border-bottom: solid 1px #e1e4ea;
      display: inline-block;
      width: 100px;
      margin-right: 30px;
      font-size: 14px;
      background-color: #edeef3;
      font-weight: normal;
      color: #000;
    }
  }
  .left,
  .center,
  .right {
    border-top: solid 1px #eee;
  }
  .right {
    border-right: solid 1px #eee;
  }
}
</style>
